<template>
  <div v-if="$route.meta.useFrame == false">
    <router-view></router-view>
  </div>

  <div v-else>
    <el-container>
      <el-header class="header">
        <el-row  justify="space-between">
          <el-col :span="3">
            <div class="logo">
              <img src="https://element-plus.gitee.io/images/element-plus-logo.svg">
            </div>
          </el-col>
          <el-col :span="2">
            <el-dropdown @command="clickDropdown">
              <span class="el-dropdown-link">
                <el-icon><User /></el-icon>   {{ store1.user.nickName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>Action 1</el-dropdown-item>

                  <el-dropdown-item command="logout" divided @click="">注销</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="auto" class="menu">

          <Menu></Menu>

        </el-aside>
        <el-main>        
          <Nav></Nav>
          <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import Menu from '@/components/Menu.vue'
import { useRoute, useRouter } from 'vue-router'
import  useStore1 from '@/store/store1'
import Nav from '@/components/Nav.vue'
const store1 = useStore1()
const route = useRoute()  //不带r, 获取当前页面相关信息，比如参数
const router = useRouter() // 带r， 负责页面跳转


onMounted(() => {

})


const clickDropdown = (arg: any) => {

  if (arg == "logout") {

    ElMessageBox.confirm('您确定退出?', '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        router.push({ name: "login" })
      })
      .catch(() => {
      })

  }

}
</script>

<style scoped>
.logo {
  line-height: 60px;
  height: 60px;
}

.logo img {
  width: 113px;
}

.menu {
  background-color: #545c64;
}

.header {
  background-color: #545c64;
  height: 60px;
  line-height: 60px;
  overflow-y: hidden;
}

.el-dropdown {
  line-height: 60px;
  color: white;
}

.el-dropdown-link {
  outline: none;
}
</style>
